<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        table{
            border: 1px solid black;
            margin: 10px auto;
        }
        th{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="search">
        按照价格查询:<input type="text" class="start">-<input type="text" class="end">
        <button class="search-price">搜索</button>
        按照商品名称查询<input type="text" class="product"><button class="search-pro">查询</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
    //数组保存元素
        var data=[{
            id:1,
            pname:'小米',
            price:3999
        },{
            id:2,
            pname:'oppo',
            price:999
        },{
            id:3,
            pname:'荣耀',
            price:1299
        },{
            id:4,
            pname:'华为',
            price:1999
        },];
        var tbody=document.querySelector('tbody');
    //表格渲染函数
        function setData(myData){
            tbody.innerHTML='';
            myData.forEach(function(value){
            var tr=document.createElement('tr');
            tr.innerHTML="<td>"+value.id+"</td><td>"+value.pname+"</td><td>"+value.price+"</td>"
            tbody.appendChild(tr);
            })
        }
       setData(data);
        var search_price=document.querySelector('.search-price');
        var start=document.querySelector('.start');
        var end=document.querySelector('.end');
    //按照价格搜索
        search_price.addEventListener('click',function(){   
            var newDate=data.filter(function(value){
                return value.price>=start.value &&value.price<=end.value;
            });
            console.log(newDate);
            setData(newDate);
        });
        var product=document.querySelector('.product');
        var search_pro=document.querySelector('.search-pro');
    //按照商品名称查询
        search_pro.addEventListener('click',function(){
            var arr=[];
            data.some(function(value){
                if(value.pname===product.value){
                    arr.push(value);
                    return true;//终止some循环，forEach和filter中不会终止
                }
            });
            setData(arr);
        });

        
    </script>
</body>
</html>